<template>
<div class="order_page">
    <head-top head-title="添加商品信息" go-back='true'></head-top>
    <div class="shoplist_container">
        <span>商品名称</span>
        <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 4}" placeholder="请输入商品名称" v-model="goodsName">
        </el-input>
        <span>请输入商品价格</span>
        <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 1}" placeholder="请输入创建人信息" v-model="goodsPrice">
        </el-input>
        <span>请输入商品数量</span>
        <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 1}" placeholder="请输入创建人信息" v-model="goodsQuantity">
        </el-input>
        <span>请输入商品单位</span>
        <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 1}" placeholder="请输入创建人信息" v-model="goodsUnit">
        </el-input>
        <span>请输入商品描述</span>
        <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 1}" placeholder="请输入创建人信息" v-model="goodsDescibe">
        </el-input>
        <span>请输入商品联系方式</span>
        <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 1}" placeholder="请输入创建人信息" v-model="contactWay">
        </el-input>
        <span>请输入商品图片</span>
        <el-upload action="http://localhost:8081/oss/file/upload" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="getgoodImage">
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <el-button type="info" round v-on:click='permiss'>提交</el-button>
        <el-button type="info" round v-on:click='back'>取消</el-button>
    </div>

</div>
</template>

<script>
import headTop from 'src/components/header/head'
export default {
    data() {
        return {
            createPerson: '',
            goodsUser: '',
            goodsName: '',
            goodsPrice: '',
            goodsQuantity: '',
            goodsUnit: '',
            goodsImage: '',
            goodsDescibe: '',
            contactWay: '',
            status: '1',
            dialogImageUrl: '',
            dialogVisible: false,
            userId: sessionStorage.getItem("userId"),
            userName: '',
        }
    },
    mounted() {
        this.getName();
    },
    components: {
        headTop

    },
    methods: {
        getgoodImage(res, file) {
            console.log(res);
            this.goodsImage = res.data.url;
            this.$forceUpdate();
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        back: function () {
            this.$router.go(-1);
        },

        permiss: function () {
            var v = this;
            this.axios({
                method: 'post',
                url: 'http://172.16.9.7:8081/goods/goods/addGoodsByGoods',
                params: {
                    createPerson: this.createPerson,
                    goodsUser: this.goodsUser,
                    goodsName: this.goodsName,
                    goodsPrice: this.goodsPrice,
                    goodsQuantity: this.goodsQuantity,
                    goodsUnit: this.goodsUnit,
                    goodsImage: this.goodsImage,
                    goodsDescibe: this.goodsDescibe,
                    contactWay: this.contactWay,
                    status: this.status,
                }
            }).then(function (res) {
                console.log(res);
                v.$router.go(-1);
            });
        },
        getName: function () {
            this.axios.get('http://172.16.9.7:8081/getUserById', {
                    params: {
                        userId: this.userId
                    }
                })
                .then(res => {
                    console.log(res);
                    this.userName = res.data;
                    this.createPerson = this.userName;
                    this.goodsUser = this.userId;
                })
        },
    }
}
</script>

<style scoped>
.shoplist_container {
    margin-top: 41px;
    width: 328px;
    background-color: #fff;
    margin-bottom: 2rem;
}
</style>
